import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import { getTimeDistance } from '@/utils/utils';
import styles from './Analysis.less';
import PageLoading from '@/components/PageLoading';

const IntroduceRow = React.lazy(() => import('./IntroduceRow'));
const ReportCard = React.lazy(() => import('./ReportCard'));

@connect(({ loading, sqlRunLogStatic }) => ({
  loading: loading.models.sqlRunLogStatic,
  sqlRunLogStatic,
}))
class Analysis extends Component {
  state = {
    rangePickerValue: getTimeDistance('last week'),
  };

  componentDidMount() {
    const { dispatch } = this.props;
    const { rangePickerValue } = this.state;
    const timeRange = {
      start: rangePickerValue[0].format('YYYY-MM-DD'),
      end: rangePickerValue[1].format('YYYY-MM-DD'),
    };
    dispatch({
      type: 'sqlRunLogStatic/getCountData',
      payload: { codes: ['全部'], ...timeRange },
    });
    dispatch({
      type: 'sqlRunLogStatic/getAvgTimeData',
      payload: { codes: ['全部'], ...timeRange },
    });
    dispatch({
      type: 'sqlRunLogStatic/getTopCount',
      payload: timeRange,
    });
    dispatch({
      type: 'sqlRunLogStatic/getTopAvgTime',
      payload: timeRange,
    });
    dispatch({
      type: 'sqlRunLogStatic/fetchReportStatistic',
    });
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.reqRef);
  }

  handleSearch = field => {
    const { dispatch } = this.props;
    const { rangePickerValue } = this.state;
    const timeRange = {
      start: rangePickerValue[0].format('YYYY-MM-DD'),
      end: rangePickerValue[1].format('YYYY-MM-DD'),
    };
    dispatch({
      type: 'sqlRunLogStatic/getCountData',
      payload: field,
    });
    dispatch({
      type: 'sqlRunLogStatic/getAvgTimeData',
      payload: field,
    });
    dispatch({
      type: 'sqlRunLogStatic/getTopCount',
      payload: timeRange,
    });
    dispatch({
      type: 'sqlRunLogStatic/getTopAvgTime',
      payload: timeRange,
    });
  };

  handleRangePickerChange = rangePickerValue => {
    this.setState({
      rangePickerValue,
    });
  };

  selectDate = type => {
    this.setState({
      rangePickerValue: getTimeDistance(type),
    });
  };

  isActive = type => {
    const { rangePickerValue } = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return '';
    }
    if (
      rangePickerValue[0].isSame(value[0], 'day') &&
      rangePickerValue[1].isSame(value[1], 'day')
    ) {
      return styles.currentDate;
    }
    return '';
  };

  render() {
    const { rangePickerValue } = this.state;
    const { loading } = this.props;

    const {
      sqlRunLogStatic: { countData, avgTimeData, topCount, topAvgTime, reportStatistic },
    } = this.props;

    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          <IntroduceRow loading={loading} data={reportStatistic} />
        </Suspense>
        <Suspense fallback={null}>
          <ReportCard
            rangePickerValue={rangePickerValue}
            countData={countData}
            avgTimeData={avgTimeData}
            topCount={topCount}
            topAvgTime={topAvgTime}
            isActive={this.isActive}
            handleRangePickerChange={this.handleRangePickerChange}
            loading={loading}
            handleSearch={this.handleSearch}
            selectDate={this.selectDate}
          />
        </Suspense>
      </GridContent>
    );
  }
}

export default Analysis;
